import {Options} from '../../render/index';
import {SpecialPropHandler, FormItemRulesBeforeHandler} from '../../render/index.ts';
import {RelationNames} from '../../render/index.ts';

/**
 * name and fixed props
 */
export const NaiveConfigure: Options = {
  configs: {
    valueKey: 'value',
    updateKey: 'onUpdate:value',
  },
  components: [
    {
      name: 'grid',
      type: 'NGrid',
      props: [
        'cols',
        'collapsed',
        'collapsedRows',
        'layoutShiftDisabled',
        'responsive',
        'itemResponsive',
        'xGap',
        'yGap'
      ],
      prefix: 'prop',
      binds: 'props',
      childRef: 'gridItem',
      inherits: {
        rowspan: 'cols'
      },
    },
    {
      name: 'gridItem',
      type: 'NGridItem',
      props: [
        'offset',
        'span',
        'suffix'
      ],
      prefix: 'prop',
      binds: 'props',
      inherits: {
        colspan: 'span'
      },
      relation: {
        componentPrefix: 'cell',
        componentBinds: 'cells',
        handleProp: false,
        relations: [
          {
            relation: RelationNames.keyValueRelationHandler,
            propName: 'formItem',
            propValue: true,
            componentRef: 'formItem',
            componentPrefix: 'item',
            componentBinds: 'items',
            handleProp: false
          },
          {
            relation: RelationNames.keyValueRelationHandler,
            propName: 'type',
            propValue: 'NGrid',
            componentRef: 'grid',
            componentPrefix: 'grid',
            componentBinds: 'grids',
            handleProp: false
          },
          {
            relation: RelationNames.matchAllRelationHandler,
            componentRef: 'any'
          }
        ]
      }
    },
    {
      name: 'formItem',
      type: 'NFormItem',
      props: [
        'feedback',
        'feedbackClass',
        'feedbackStyle',
        'first',
        'ignorePathChange',
        'label',
        'labelAlign',
        'labelPlacement',
        'labelStyle',
        'labelProps',
        'labelWidth',
        'path',
        'rulePath',
        'showFeedback',
        'showLabel',
        'showRequireMark',
        'requireMarkPlacement',
        'size',
        'validationStatus',
        'rule'
      ],
      alias: {
        rules: 'rule'
      },
      prefix: 'prop',
      binds: 'props',
      beforeHandlers: [
        'formItemRuleHandler'
      ],
      relation: {
        componentPrefix: 'item',
        componentBinds: 'items',
        handleProp: false,
        relations: [
          {
            relation: RelationNames.keyValueRelationHandler,
            propName: 'type',
            propValue: 'NGrid',
            componentRef: 'grid',
            componentPrefix: 'grid',
            componentBinds: 'grids',
            handleProp: false
          },
          {
            relation: RelationNames.matchAllRelationHandler,
            componentRef: 'any'
          }
        ]
      }
    },
    {
      name: 'collapse',
      type: 'NCollapse',
      props: [
        'accordion',
        'arrowPlacement',
        'defaultExpandedNames',
        'displayDirective',
        'expandedNames',
        'triggerAreas',
        'onItemHeaderClick',
        'onUpdate:expandedNames'
      ],
      prefix: 'prop',
      binds: 'props',
      childRef: 'collapseItem',
    },
    {
      name: 'collapseItem',
      type: 'NCollapseItem',
      props: [
        'disabled',
        'displayDirective',
        'name',
        'title',
      ],
      alias: {
        collapseItemName: 'name'
      },
      prefix: 'prop',
      binds: 'props',
      relation: {
        componentPrefix: 'item',
        componentBinds: 'items',
        handleProp: false,
        relations: [
          {
            relation: RelationNames.keyValueRelationHandler,
            propName: 'type',
            propValue: 'NGrid',
            componentRef: 'grid',
            componentPrefix: 'grid',
            componentBinds: 'grids',
            handleProp: false
          },
          {
            relation: RelationNames.matchAllRelationHandler,
            componentRef: 'any'
          }
        ]
      }
    },
    {
      name: 'tabs',
      type: 'NTabs',
      props: [
        'addable',
        'addTabClass',
        'addTabStyle',
        'animated',
        'barWidth',
        'closable',
        'defaultValue',
        'justifyContent',
        'size',
        'paneClass',
        'paneStyle',
        'paneWrapperClass',
        'paneWrapperStyle',
        'placement',
        'tabClass',
        'tabStyle',
        'tabsPadding',
        'trigger',
        'type',
        'value',
        'onAdd',
        'onBeforeLeave',
        'onClose',
        'onUpdate:value',
      ],
      prefix: 'prop',
      binds: 'props',
      childRef: 'tabsItem'
    },
    {
      name: 'tabsItem',
      type: 'NTabPane',
      props: [
        'closable',
        'disabled',
        'displayDirective',
        'name',
        'tab',
        'tabProps'
      ],
      alias: {
        tabsItemName: 'name'
      },
      prefix: 'prop',
      binds: 'props',
      relation: {
        componentPrefix: 'item',
        componentBinds: 'items',
        handleProp: false,
        relations: [
          {
            relation: RelationNames.keyValueRelationHandler,
            propName: 'type',
            propValue: 'NGrid',
            componentRef: 'grid',
            componentPrefix: 'grid',
            componentBinds: 'grids',
            handleProp: false
          },
          {
            relation: RelationNames.matchAllRelationHandler,
            componentRef: 'any'
          }
        ]
      }
    },
    {
      name: 'any',
      type: '*',
      prefix: 'prop',
      binds: 'props',
      propHandlers: [
        'specialPropHandler'
      ]
    }
  ],
  propHandlers: [
    {
      name: 'specialPropHandler',
      handler: new SpecialPropHandler('FxIcon')
    }
  ],
  beforeHandlers: [
    {
      name: 'formItemRuleHandler',
      handler: new FormItemRulesBeforeHandler('NFormItem', 'rule', 'rules'),
    }
  ]
};